<template>
	<div class="freight_container">
		<div class="freight_header">
			<el-button type="primary" icon="el-icon-search" @click='fixFreight("add")'>添加</el-button>
		</div>
		<!-- 表格数据 -->
		<el-table v-loading="loading" :data="freightList" size='small' element-loading-text="正在查询中。。。" border fit
			highlight-current-row>
			<el-table-column align="center" width="80" label="模板编号" prop="freightTemplateDO.id" />
			<el-table-column align="center" width="300" label="模板名称" prop="freightTemplateDO.templateName" />
			<el-table-column align="center" width="80" label="宝贝地址" prop="freightTemplateDO.orderNo" />
			<el-table-column align="center" width="80" label="发货期限" prop="freightTemplateDO.deliveryDeadline">
				<template slot-scope="scope">{{scope.row.freightTemplateDO.deliveryDeadline}}天</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="默认包邮门栏" prop="freightTemplateDO.defaultFreePrice">
				<template slot-scope="scope">{{isFreePrice(scope.row.freightTemplateDO.defaultFreePrice)}}</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="默认计费首次发货数量" prop="freightTemplateDO.defaultFirstNum">
				<template slot-scope="scope">{{scope.row.freightTemplateDO.defaultFirstNum}}件</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="默认计费首次发货价格" prop="freightTemplateDO.defaultFirstMoney">
				<template slot-scope="scope">{{scope.row.freightTemplateDO.defaultFirstMoney/100}}元</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="默认计费续件数量" prop="freightTemplateDO.defaultContinueNum">
				<template slot-scope="scope">{{scope.row.freightTemplateDO.defaultContinueNum}}件</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="默认计费续件价格" prop="freightTemplateDO.defaultContinueMoney">
				<template slot-scope="scope">{{scope.row.freightTemplateDO.defaultContinueMoney/100}}元</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="指定地区数量" prop="freightTemplateCarriageDOList.length" />
			<el-table-column align="center" label="操作" width="300">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click='fixFreight("edid",scope.row)'>修改</el-button>
					<el-button type="danger" size="mini" @click='delFreight(scope.row.freightTemplateDO)'>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加或修改 -->
		<el-dialog :fullscreen="true" :title="title" :visible.sync="freightDialog" style="scroll:auto">
			<el-form ref="freightForm" :rules='rules' label-width="150px" :model="freightForm" status-icon
				label-position="left" style="margin-left: 50px;">
				<el-form-item label="模板名称" prop="templateName">
					<el-input clearable v-model="freightForm.templateName" style="width:550px !important;"></el-input>
				</el-form-item>
				<el-form-item label="发货地址" prop="spuLocation">
					<el-input clearable v-model="freightForm.spuLocation" style="width:550px !important;"></el-input>
				</el-form-item>
				<el-form-item label="发货期限" prop="deliveryDeadline">
					<el-input v-model.number="freightForm.deliveryDeadline" clearable style="width:550px !important;">
						<template slot="append">天</template>
					</el-input>
				</el-form-item>
				<el-form-item label="是否包邮">
					<el-radio-group v-model="freightForm.isFree" style="width:550px !important;">
						<el-radio :label="-1">坚决不包邮</el-radio>
						<el-radio :label="0">卖家承担包邮</el-radio>
						<el-radio :label="1">设定满额包邮</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="freightForm.isFree === 1" label="默认包邮额度" prop="defaultFreePrice">
					<el-input v-model.number="freightForm.defaultFreePrice" style="width:550px !important;">
						<template slot="append">天</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="freightForm.isFree !== 0" label="计费首次数量" prop="defaultFirstNum">
					<el-input v-model.number="freightForm.defaultFirstNum" clearable style="width:550px !important;">
						<template slot="append">件
							<el-tooltip placement="top-start" effect="dark" content="当用户购买商品数量小于 '这个数' 就支付默认首次发货价格的运费">
								<i class="el-icon-question" />
							</el-tooltip>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="freightForm.isFree !== 0" label="计费首次价格" prop="defaultFirstPrice">
					<el-input v-model.number="freightForm.defaultFirstPrice" clearable style="width:550px !important;">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="freightForm.isFree !== 0" label="计费续件数量" prop="defaultContinueNum">
					<el-input v-model.number="freightForm.defaultContinueNum" clearable style="width:550px !important;">
						<template slot="append">件
							<el-tooltip placement="top-start" effect="dark"
								content="当用户购买数量高于 ‘首次发货数量’ 每多 N 件，就须额外支付 ‘续件价格">
								<i class="el-icon-question" />
							</el-tooltip>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="freightForm.isFree !== 0" label="计费续件价格" prop="defaultContinuePrice">
					<el-input v-model.number="freightForm.defaultContinuePrice" clearable
						style="width:550px !important;">
						<template slot="append">件
							<el-tooltip placement="top-start" effect="dark" content="若不需要计件额外算运费，则直接填0即可">
								<i class="el-icon-question" />
							</el-tooltip>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="指定地区价格" prop="freightTemplateCarriageDOList">
					<el-button @click='addArea()' :plain="true" type="primary" size="small"
						style="width: 80px !important;height:40px;font-size: 14px;">添加</el-button>
					<el-table style="margin-top: 20px;width: 900px;" :data='freightForm.freightTemplateCarriageDOList' >
						<el-table-column v-if="title==='编辑'" property="id" label="指定地区ID" />
						<el-table-column property="designatedArea" label="指定省份" />
						<el-table-column property="firstNum" label="首次数量" />
						<el-table-column property="firstMoney" label="续件数量" />
						<el-table-column property="continueNum" label="续件价格" />
						<el-table-column property="continueMoney" label="续件数量" />
						<el-table-column property="freePrice" label="满额包邮门栏" />
						<el-table-column align="center" label="操作" width="100">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click='deleteArea(scope.row)'>删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFreightDialog">取消</el-button>
				<el-button v-if="title === '创建'" type="primary" @click="createData('freightForm')">确定</el-button>
				<el-button v-else type="primary" @click="updateDate('freightForm')">确定</el-button>
			</div>
		</el-dialog>
		<!-- 添加地区价格 -->
		<el-dialog :visible.sync="areaVisible" title="添加指定地区" :modal="false" :append-to-body="true"  width="70%">
			<el-form status-icon ref="areaForm" :model="areaForm" :rules="rules" label-position="left"
				style="margin-left: 50px;" label-width="100px">
				<el-form-item label="包邮门栏" prop="freePrice">
					<el-input clearable v-model="areaForm.freePrice"><template slot="append">元</template></el-input>
				</el-form-item>
				<el-form-item label="首次数量" prop="firstNum">
					<el-input clearable v-model="areaForm.firstNum"><template slot="append">件</template></el-input>
				</el-form-item>
				<el-form-item label="首次价格" prop="firstMoney">
					<el-input clearable v-model="areaForm.firstMoney"><template slot="append">元</template></el-input>
				</el-form-item>
				<el-form-item label="续件数量" prop="continueNum">
					<el-input clearable v-model="areaForm.continueNum"><template slot="append">件</template></el-input>
				</el-form-item>
				<el-form-item label="续件价格" prop="continueMoney">
					<el-input clearable v-model="areaForm.continueMoney"><template slot="append">元</template></el-input>
				</el-form-item>
				<el-form-item label="指定地区" prop="designatedAreaList">
					<el-checkbox-group v-model="areaForm.designatedAreaList" style="width: 530px;">
						<el-checkbox v-for="(item,index) in provinceList" :key='index' :label="item">{{item}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeAreaVisible">取消</el-button>
				<el-button type="primary"  @click='confirmArea("areaForm")'>确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getFreightList,
		deletaFreight,
		createFreight,
		updateFreight
	} from "../api.js"
	export default {
		data() {
			return {
				loading: false,
				freightList: [],
				title: '创建',
				freightDialog: false,
				areaVisible: false,
				freightForm: { //表单
					templateId: undefined,
					templateName: undefined,
					spuLocation: undefined,
					deliveryDeadline: undefined,
					isFree: undefined,
					defaultFreePrice: undefined,
					defaultFirstPrice: undefined,
					defaultFirstNum: undefined,
					defaultContinueNum: undefined,
					defaultContinuePrice: undefined,
					freightTemplateCarriageDOList: []
				},
				// 指定地区表单
				areaForm: {
					templateId:undefined,
					freePrice: undefined,
					firstNum: undefined,
					firstMoney: undefined,
					continueNum: undefined,
					continueMoney: undefined,
					designatedAreaList: [],
					designatedArea:undefined,
				},
				provinceList: [
					"北京市",
					"天津市",
					"河北省",
					"山西省",
					"内蒙古自治区",
					"辽宁省",
					"吉林省",
					"黑龙江省",
					"上海市",
					"江苏省",
					"浙江省",
					"安徽省",
					"福建省",
					"江西省",
					"山东省",
					"河南省",
					"湖北省",
					"湖南省",
					"广东省",
					"广西壮族自治区",
					"海南省",
					"重庆市",
					"四川省",
					"贵州省",
					"云南省",
					"西藏自治区",
					"陕西省",
					"甘肃省",
					"青海省",
					"宁夏回族自治区",
					"新疆维吾尔自治区",
					"台湾省",
					"香港特别行政区",
					"澳门特别行政区"
				],
				rules: {
					templateName: [{
						required: true,
						message: "模板名称不能为空",
						trigger: "blur"
					}],
					deliveryDeadline: [{
							required: true,
							message: "发货期限不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					defaultFreePrice: [{
							required: true,
							message: "包邮门栏额度不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					defaultFirstNum: [{
							required: true,
							message: "首次计费数量不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					defaultFirstPrice: [{
							required: true,
							message: "首次计费价格不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					defaultContinueNum: [{
							required: true,
							message: "续件计费数量不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					defaultContinuePrice: [{
							required: true,
							message: "续件计费价格不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					freePrice: [{
							required: true,
							message: "包邮门栏不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					firstNum: [{
							required: true,
							message: "首次数量不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					firstMoney: [{
							required: true,
							message: "首次价格不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					continueNum: [{
							required: true,
							message: "续件数量不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					continueMoney: [{
							required: true,
							message: "续件价格不能为空",
							trigger: "blur"
						},
						{
							pattern: /^[0-9]*$/,
							message: "请输入整数"
						}
					],
					designatedAreaList:[
						{
								required: true,
								message: "至少选择一个地区",
								trigger: "blur"
							}
					]
				}
			}
		},
		methods: {
			// 获取数据
			getData() {
				this.loading = true
				getFreightList().then((res) => {
					this.freightList = res.data.data
					this.loading = false;
				})
			},
			// 是否包邮
			isFreePrice(value){
				if(value === 0){
					return '包邮'
				}else if(value < 0){
					return '不包邮'
				}else{
					return '满'+value/100+'元包邮'
				}
			},
			// 删除
			delFreight(value) {
				this.$confirm(
					"此操作将永久删除该商品推荐--" + value.templateName + "--, 是否继续?",
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				).then(() => {
					deletaFreight(value.id).then((res) => {
						console.log(res)
						this.$message.success("删除运费模板成功");
						let index = this.freightList.indexOf(value);
						this.freightList.splice(index, 1);
					})
				})
			},
			fixFreight(type, value) {
				this.freightDialog = true;
				if (type === 'add') {
					this.title = '创建'
					this.freightForm = {
						templateName: undefined,
						spuLocation: undefined,
						deliveryDeadline: undefined,
						isFree: 1,
						defaultFreePrice: 68,
						defaultFirstPrice: 0,
						defaultFirstNum: 1,
						defaultContinueNum: 1,
						defaultContinuePrice: 0,
						freightTemplateCarriageDOList: []
					}
				} else {
					this.title = '编辑';
					console.log(value.freightTemplateDO.defaultFreePrice/100)
					this.freightForm = Object.assign({},{
						templateId: value.freightTemplateDO.id,
						templateName: value.freightTemplateDO.templateName,
						spuLocation: value.freightTemplateDO.spuLocation,
						deliveryDeadline: value.freightTemplateDO.deliveryDeadline,
						isFree: (value.freightTemplateDO.defaultFreePrice/100) > 0 ?1 :value.freightTemplateDO.defaultFreePrice/100,
						defaultFreePrice: value.freightTemplateDO.defaultFreePrice/100,
						defaultFirstPrice: value.freightTemplateDO.defaultFirstMoney/100,
						defaultFirstNum: value.freightTemplateDO.defaultFirstNum,
						defaultContinueNum: value.freightTemplateDO.defaultContinueNum,
						defaultContinuePrice: value.freightTemplateDO.defaultContinueMoney/100,
						freightTemplateCarriageDOList:value.freightTemplateCarriageDOList
					})
					for(let i = 0; i<this.freightForm.freightTemplateCarriageDOList.length;i++){
						this.freightForm.freightTemplateCarriageDOList[i].continueMoney = this.freightForm.freightTemplateCarriageDOList[i].continueMoney/100
						this.freightForm.freightTemplateCarriageDOList[i].firstMoney = this.freightForm.freightTemplateCarriageDOList[i].firstMoney/100
						this.freightForm.freightTemplateCarriageDOList[i].freePrice = this.freightForm.freightTemplateCarriageDOList[i].freePrice/100
					}
					console.log(this.freightForm)
				}
				if (this.$refs.freightForm != undefined) { //移除验证
					this.$refs.freightForm.resetFields();
				}
			},
			// 增加运费模板
			createData(formName) {
				// 不包邮
				if(this.freightForm.isFree === -1){
					this.freightForm.defaultFreePrice = -1;
				}
				// 商家包邮
				if(this.freightForm.isFree === 0){
					this.freightForm.defaultFreePrice = 0
					this.freightForm.defaultFirstPrice = 0;
					this.freightForm.defaultContinuePrice = 0;
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let form = this.fillterTemplate(this.freightForm)
						createFreight(form).then((res)=>{
							console.log(res)
							this.freightDialog = false;
							this.$message.success("创建运费模板成功");
							this.getData()
						})
					}else{
						return false;
					}
				})
			},
			// 
			fillterTemplate(value){
				let data = JSON.parse(JSON.stringify(value));//
				data.defaultFreePrice = value.defaultFreePrice*100;
				data.defaultFirstPrice = value.defaultFirstPrice*100;
				data.defaultContinuePrice = value.defaultContinuePrice*100;  
				let list = data.freightTemplateCarriageDOList;
				for(let i = 0;i<value.freightTemplateCarriageDOList.length;i++){
					data.freightTemplateCarriageDOList[i].freePrice = value.freightTemplateCarriageDOList[i].freePrice * 100;
					data.freightTemplateCarriageDOList[i].firstMoney = value.freightTemplateCarriageDOList[i].firstMoney * 100;
					data.freightTemplateCarriageDOList[i].continueMoney = value.freightTemplateCarriageDOList[i].continueMoney * 100;
				}
				// console.log(data)
				return data;
			},
			// 更改
			updateDate(formName){
				// 不包邮
				if(this.freightForm.isFree === -1){
					this.freightForm.defaultFreePrice = -1;
				}
				// 商家包邮
				if(this.freightForm.isFree === 0){
					this.freightForm.defaultFreePrice = 0
					this.freightForm.defaultFirstPrice = 0;
					this.freightForm.defaultContinuePrice = 0;
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let form = this.fillterTemplate(this.freightForm)
						updateFreight(form).then((res)=>{
							this.freightDialog = false;
							this.$message.success("修改运费模板成功");
							this.getData()
						})
					}else{
						return false;
					}
				})
			},
			// 添加地区价格
			addArea() {
				this.areaVisible = true;
				this.areaForm={
					freePrice: undefined,
					firstNum: undefined,
					firstMoney: undefined,
					continueNum: undefined,
					continueMoney: undefined,
					designatedAreaList: [],
					designatedArea:undefined,
				}
				if (this.$refs.areaForm != undefined) { //移除验证
					this.$refs.areaForm.resetFields();
				}
			},
			// 添加地区
			confirmArea(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.areaForm.designatedArea = this.areaForm.designatedAreaList.join(',')
						var form = Object.assign({}, this.areaForm);
						this.freightForm.freightTemplateCarriageDOList.unshift(form)
						this.areaVisible = false;
					}else{
						return false;
					}
					})
			},
			// 删除地区
			deleteArea(value){
				this.$confirm(
					"此操作将删除该指定地区, 是否继续?",
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				).then(() => {
					let index = this.freightForm.freightTemplateCarriageDOList.indexOf(value);
					this.freightForm.freightTemplateCarriageDOList.splice(index, 1);
				})
			},
			// 关闭弹框
			closeFreightDialog() {
				this.freightDialog = false;
			},
		
			closeAreaVisible() {
				this.areaVisible = false;
			},
		},
		created() {
			this.getData()
		}
	}
</script>

<style>
	.freight_container {
		width: 100%;
		height: 660px;
		overflow-x: auto;
		overflow-y: auto;
		padding: 20px;
	}

	.freight_header {
		padding-bottom: 10px;
	}
</style>
